<template>
  <div class="home">
    <ul class="nav">
      <li @click="flag = 0" :class="{ active: flag == 0 }">
        未读 {{ $store.getters.obj.num0 }}
      </li>
      <li @click="flag = 1" :class="{ active: flag == 1 }">
        已读{{ $store.getters.obj.num1 }}
      </li>
      <li @click="flag = 2" :class="{ active: flag == 2 }">
        回收站{{ $store.getters.obj.num2 }}
      </li>
    </ul>

    <notread v-show="flag == 0" />
    <read v-show="flag == 1" />
    <recycle v-show="flag == 2" />
  </div>
</template>

<script>
import notread from "../components/Notread.vue";
import read from "../components/Read.vue";
import recycle from "../components/Recycle.vue";
export default {
  data() {
    return {
      flag: 0,
    };
  },
  mounted() {
    this.$axios.get("data.json").then((res) => {
      this.$store.commit("setlist", res.data.list);
    });
  },
  components: {
    notread,
    read,
    recycle,
  },
  // computed: {
  //   obj() {
  //     let num0 = this.$store.state.list.filter((item) => {
  //       return item.status == 0;
  //     }).length;
  //     let num1 = this.$store.state.list.filter((item) => {
  //       return item.status == 1;
  //     }).length;
  //     let num2 = this.$store.state.list.filter((item) => {
  //       return item.status == 2;
  //     }).length;

  //     return { num0: num0, num1: num1, num2: num2 };
  //   },
  // },
};
</script>
<style lang="scss">
.home {
  width: 800px;
  margin: 100px auto;
}
.nav {
  width: 400px;
  display: flex;

  li {
    flex: 1;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
  .active {
    color: skyblue;
    border-bottom: 1px solid skyblue;
  }
}
</style>
